<template>
    <div>
        <div v-for="(item, idx ) in bannerList" :key="idx" class="imgs">
            <!-- 渲染六张图片 -->
            <div v-for="(val) in 6" :key="val" >
                <span v-if="val === 1" class="mark" @click="toImgAll(item)"> {{item.title}}{{item.img.length}}张图片 </span>
                <img :src="item.img[val]" alt="" @click="bigImg(item.img[val])">
            </div>
        </div>
        <div  class="big-img" v-if="src">
            <img :src="src" />
            <el-button @click="close"> 关闭 </el-button>
        </div>
    </div>
</template>

<script>
import { carDetail } from "@/api";

export default {
    created() {
        this.getImgDetail()
    },
    data() {
        return {
            bannerList: {},
            src: ''
        }
    },
    methods: {
        getImgDetail() {
            carDetail().then(res => {
                this.bannerList = res.data.banner
            })
        },
        close() {
            this.src = ''
        },
        bigImg(url) {
            this.src = url
        },
        toImgAll(value) {
            this.$router.push({name: 'Imgall', params: {imgs: value.img}})
        }
    }
}
</script>

<style lang="scss" scoped>
.imgs {
    display: flex;
    flex-wrap: wrap;
    div {
        width: 33.3%;
        position: relative;
        .mark {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffff;
            background: rgba(0,0,0,0.5);
            width: 100%;
            height: 100%;
        }
        img {
            width: 100%;
        }
    }
}

.big-img {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    z-index: 999;
            flex-direction: column;

    img {
        width: 100%;
    }
}
</style>
